<template>
  <h1>简单图表数据</h1>
  <hr />
  <p class="xlfx" style="text-align: center; font-size: 25px">销量分析平滑折线图</p>
  <div ref="main" style="width: 100%; height: 80%"></div>
</template>

<script setup lang="ts">
// 导入echats
import * as echarts from 'echarts/core';
import { ref, onMounted, reactive } from "vue";
import service from "../../../utils/service";

const main = ref();
onMounted(() => {
  getDataList()
});

// 获取图表数据
const getDataList = () => {
  service({
    url: "data/simpleData",
  }).then((res: any) => {
    if (res.data.code === "200") {
      res.data.data.forEach((item: any) => {
        valx.push(item.x)
        valy.push(item.val)
      });
    }
  }).then(() => {
    initEcgarts() //数据更新后调用initeCharts()
  })
};

const valx = reactive<string[]>([])
const valy = reactive<string[]>([])
console.log("valx", valx)
console.log("valy", valy)

const initEcgarts = () => {

  const myChart = echarts.init(main.value);

  let option = {
    xAxis: {
      type: 'category',
      data: valx,
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: valy,
        type: 'line'
      }
    ]
  };

  option && myChart.setOption(option);
};
</script>

<style></style>